<template>
	<view>
		<view class="index-container">
			<view class="header">
				<view class="search-box" @click="toSearch()">
					<uni-search-bar placeholder="搜索演出" style="width:100%" bgColor="#f2f2f2" textColor="#999999"
						@confirm="search" readonly="true" />
				</view>
				<view class="location" ref="locationRef" @click="toLocation()">
					<view class="city-name">{{city}}</view>
					<view class="location-icon">
						<uni-icons type="location-filled" size="25"></uni-icons>
					</view>
				</view>
			</view>
			<view class="index-content">
				<swiper class="swiper-box" :circular="true" :indicator-dots="true" :current="round" duration="2000"
					indicator-color="#c4c4c4" indicator-active-color="#fff" autoplay>
					<swiper-item v-for="(item, index) in carouselList" :key="index"
						@click="toShowDetail(item.perfDetId)">
						<view class="swiper-item" :class="'swiper-item' + index">
							<image :src="item.url" />
						</view>
					</swiper-item>
				</swiper>
				<view class="category">
					<view class="category-box" v-for="(item, index) in categoryList" :key="index"
						@click="toCategory(item.id)" v-show="item.id!=0">
						<view class="category-image" :class="'category-item' + index">
							<image :src="item.iconUrl" />
						</view>
						<view class="category-name">{{item.name}}</view>
					</view>
				</view>
				<view class="hot-show">
					<view class="hot-text">
						<view class="hot-title show-bgcolor">热门演出</view>
						<view class="all-show" @click="toCategory(0)">查看全部</view>
					</view>
					<scroll-view class="scroll-view_H show-height" scroll-x="true" @scroll="scroll" scroll-left="0">
						<view class="scroll-view-item_H show-height show-width"
							v-for="(item, index) in hotShowList.data.list" :key="index" @click="toShowDetail(item.id)">
							<view class="show-image">
								<img class="show-image-item" :src="item.hotShowUrl" />
							</view>
							<view class="show-name">
								{{item.name}}
							</view>
							<view class="show-category">
								{{item.category}}
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="topics">
					<view class="hot-text">
						<view class="hot-title topic-bgcolor">精选专题</view>
						<view class="all-show">查看全部</view>
					</view>
					<scroll-view class="scroll-view_H topic-height" scroll-x="true" @scroll="scroll" scroll-left="0">
						<view class="scroll-view-item_H topic-height topic-width"
							v-for="(item, index) in topicList.data.list" :key="index">
							<view class="topic-image">
								<img class="topic-image-item" :src="item.topicUrl" />
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="hot-artist">
					<view class="hot-text">
						<view class="hot-title artist-bgcolor">热门艺人</view>
						<view class="all-show">查看全部</view>
					</view>
					<scroll-view class="scroll-view_H artist-height" scroll-x="true" @scroll="scroll" scroll-left="0">
						<view class="scroll-view-item_H artist-height artist-width"
							v-for="(item, index) in artistList.data.list" :key="index">
							<view class="artist-avatar">
								<img class="artist-avatar-item" :src="item.avatarUrl" />
							</view>
							<view class="artist-name">
								{{item.nickname}}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted,
		watch,
		watchEffect
	} from 'vue';
	import {
		sharedState,
		updateState
	} from '@/common/store.js'
	import { onShow, onHide, onUnload, onLoad } from '@dcloudio/uni-app';
	import { CATEGORYLIST } from '@/common/categoryList.js'
	
	/**
	 * 城市定位
	 */
	let city = ref("南宁");
	const locationRef = ref(null);
	
	let carouselList = ref([]);
	
	let categoryList =ref(CATEGORYLIST);
	
	const getCarouselList=()=>{
		uni.request({
			url: '/st/carousel/list',
			method: 'GET',
			success: (res) => {
				if (res.data.code == 200) {
		      carouselList.value = res.data.rows;
				console.log(res.data);
				} else if (res.data.code != 200) {
					console.log(res.data.code, "异常");
				}
			}
		});
	}
	/**
	 * 分类列表data
	 */
	/**
	 * 热门演出data（redis rowset类型存储）
	 */

	let hotShowList = ref({
		code: 2000,
		msg: "success",
		data: {
			list: [{
					id: 1,
					hotShowUrl: "https://cdn7.axureshop.com/demo/1564251/images/%E9%A6%96%E9%A1%B5/u2103.png",
					name: "Jony·leron 全球巡回演唱会",
					category: "演唱会"
				},
				{
					id: 2,
					hotShowUrl: "https://cdn7.axureshop.com/demo/1564251/images/%E9%A6%96%E9%A1%B5/u2099.png",
					name: "慕夏作品展",
					category: "美术展览"
				},
				{
					id: 3,
					hotShowUrl: "https://cdn7.axureshop.com/demo/1564251/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1080.png",
					name: "莫奈·印象作品展",
					category: "美术展览"
				},
				{
					id: 4,
					hotShowUrl: "https://cdn7.axureshop.com/demo/1564251/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1076.png",
					name: "sasakure.UK 全球巡回演唱会",
					category: "演唱会"
				},
			]
		}
	})

	/**
	 * 热门艺人data（redis rowset类型存储）
	 */

	let artistList = ref({
		code: 2000,
		msg: "success",
		data: {
			list: [{
					id: 1,
					avatarUrl: "https://cdn7.axureshop.com/demo/1564251/images/%E9%A6%96%E9%A1%B5/u2173.png",
					nickname: "Jony·leron"
				},
				{
					id: 2,
					avatarUrl: "https://cdn7.axureshop.com/demo/1564251/images/%E9%A6%96%E9%A1%B5/u2166.png",
					nickname: "Jony·leron"
				},
				{
					id: 3,
					avatarUrl: "https://cdn7.axureshop.com/demo/1564251/images/%E9%A6%96%E9%A1%B5/u2170.png",
					nickname: "Jony·leron"
				},
				{
					id: 4,
					avatarUrl: "https://cdn7.axureshop.com/demo/1564251/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1042.png",
					nickname: "Jony·leron"
				}
			]
		}
	})

	/**
	 * 精选专题data （redis rowset类型存储）
	 */

	let topicList = ref({
		code: 2000,
		msg: "success",
		data: {
			list: [{
					id: 1,
					topicUrl: "https://cdn7.axureshop.com/demo/1564251/images/%E9%A6%96%E9%A1%B5/u2187.png"
				},
				{
					id: 2,
					topicUrl: "https://cdn7.axureshop.com/demo/1564251/images/%E9%A6%96%E9%A1%B5/u2194.png"
				},
				{
					id: 3,
					topicUrl: "https://cdn7.axureshop.com/demo/1564251/images/%E9%A6%96%E9%A1%B5/u2200.png"
				}
			]
		}
	})
	/**
	 * 跳转搜索页
	 */
	let toSearch = () => {
		console.log("跳转搜索")
		uni.navigateTo({
			url: "/pages/search/search",
			animationType: 'pop-in',
			animationDuration: 200
		})
	}
	/**
	 * 跳转城市定位页
	 */

	let toLocation = () => {
		uni.navigateTo({
			url: "/pages/location/location"
		})
	}
	/**
	 * 订单结算页和售票信息页暂时性跳转按钮
	 */
	let testToTicketInfo = () => {
		uni.navigateTo({
			url: "/pages/ticketinfo/ticketinfo",
		})
	}

	let toShowDetail = (id) => {
		let showId = id;
		let showDetailData = {};
		for (const item of hotShowList.value.data.list) {
			if (item.id == showId) {
				showDetailData = {keyWord:"hot",data:item};
			}
		}
		uni.setStorage({
			key: 'showDetailStorage',
			data: showDetailData,
			success: function() {
				console.log('数据存储成功');
				uni.navigateTo({
					url: "/pages/showdetail/showdetail?id=" + showId
				})
			},
			fail: function(err) {
				console.error('数据存储失败', err);
			}
		});

	}

	let toCategory = (id) => {
		let categoryId = id;
	updateState(categoryId);
		uni.switchTab({
			url: "/pages/category/category"
		})
	}

	onMounted(() => {
		getCarouselList();
	});

	onUnmounted(() => {
	});

	watchEffect(() => {
		
	});
</script>

<style lang="scss" scoped>
	.index-container {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background: #fff;
	}

	.header {
		width: 100%;
		height: 70px;
		display: flex;
		box-sizing: border-box;
		padding: 5px 15px 0px 15px;
		position: fixed;
		top: 0px;
		z-index: 1000;
		background: #fff;
		flex-grow: 10;


		.search-box {
			flex-grow: 10;
			/* 让search-box占据剩余空间 */
			display: flex;
			/* 使search-box内部的元素水平居中 */
			justify-content: center;

			.uni-searchbar {
				width: 100%;
			}
		}

		.location {
			white-space: nowrap;
			width: auto;
			height: 60px;
			padding: 10px;
			box-sizing: border-box;
			flex-grow: 0;


			.city-name {
				float: right;
				line-height: 36px;
				font-size: 14px;
			}

			.location-icon {
				float: right;
				line-height: 36px;
			}
		}
	}

	.hot-show {}

	.hot-text {
		width: 100%;
		height: 30px;
		box-sizing: border-box;
		padding: 0px 25px;
		margin: 15px 0px;

		.hot-title {
			font-size: 18px;
			line-height: 30px;
			float: left;
			height: 30px;
		}

		.all-show {
			font-size: 13px;
			color: #ff5a5f;
			line-height: 30px;
			float: right;
		}
	}

	.show-bgcolor {
		background: linear-gradient(to bottom, transparent 50%, #d4f6ea 50%);
	}

	.artist-bgcolor {
		background: linear-gradient(to bottom, transparent 50%, #e0e2fa 50%);
	}

	.topic-bgcolor {
		background: linear-gradient(to bottom, transparent 50%, #ff626219 50%);
	}

	.index-content {
		margin-top: 70px;
		padding-bottom: 50px;
		float: left;

		.category {
			width: 100%;
			height: 160px;
			box-sizing: border-box;
			padding: 0px 25px;
			margin: 20px 0px;

			.category-box {
				width: 25%;
				height: 80px;
				float: left;

				.category-image {
					width: 100%;
					height: 50px;
					display: flex;
					/* 使用 Flexbox */
					justify-content: center;
					/* 水平居中 */
					align-items: center;

					/* 垂直居中 */
					image {
						width: 25px;
						height: 25px;
					}

				}

				.category-name {
					width: 100%;
					height: 30px !important;
					line-height: 30px;
					font-size: 13px;
					text-align: center;
				}
			}
		}
	}




	.scroll-view_H {
		width: 100vw;
		box-sizing: border-box;
		padding: 0 25px;
		white-space: nowrap;

		.scroll-view-item_H {
			display: inline-block;
			margin-right: 15px;

			.show-image {
				width: auto;
				height: calc(100% - 60px);


			}

			.show-image>.show-image-item {
				width: 130px;
				height: 100%;
			}

			.show-name {
				width: 100%;
				height: 30px;
				line-height: 40px;
				text-align: left;
				color: #333;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 14px;
			}

			.show-category {
				width: 100%;
				height: 30px;
				line-height: 30px;
				text-align: left;
				color: #9f9e9e;
				font-size: 14px;
			}
		}

		.scroll-view-item_H:last-child {
			margin-right: 0px;
		}
	}

	.show-height {
		height: 220px;
	}

	.show-width {
		width: 130px;
	}

	.topic-width {
		width: 250px;
	}

	.topic-height {
		height: 150px;
	}

	.artist-height {
		height: 110px;
	}

	.artist-width {
		width: 80px;
	}

	.topic-image-item {
		width: 250px;
		height: 150px;
	}

	.artist-avatar-item {
		width: 80px;
		height: 80px;
	}

	.artist-avatar {
		width: 100%;
		height: calc(100% - 30px);
	}


	.artist-name {
		line-height: 30px;
		font-size: 13px;
		text-align: center;

	}

	.swiper-box {
		margin: 0 25px;
		display: block;
		box-sizing: border-box;
	}

	.swiper-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;

		image {
			width: 100%;
			height: 100%;
		}
	}



	/* 对于小屏幕设备（例如手机） */
	@media (max-width: 450px) {
		.swiper-item {
			height: 170px;
			/* 较小的视口高度 */
		}

		.swiper-box {
			height: 170px;
			/* 较小的视口高度 */
		}
	}

	/* 对于中等屏幕设备（例如平板） */
	@media (min-width: 601px) and (max-width: 1024px) {
		.swiper-item {
			height: 250px;
			/* 中等视口高度 */
		}

		.swiper-box {
			height: 250px;
			/* 较小的视口高度 */
		}
	}
</style>